<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="username" @clear="getReportList">
                        <el-button slot="append" icon="el-icon-search" @click="getReportList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="userList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="昵称" prop="nickname"></el-table-column>
                <el-table-column label="性别">
                  <template slot-scope="scop">
                    <span v-if="scop.row.sex==1">男</span>
                    <span v-if="scop.row.sex==0">女</span>
                  </template>
                </el-table-column>
                <el-table-column label="年龄" prop="age"></el-table-column>
                <el-table-column label="点券" prop="pointTicket"></el-table-column>
                <el-table-column label="阅点" prop="readPoint"></el-table-column>
                <el-table-column label="月票" prop="monthTicket"></el-table-column>
                <el-table-column label="头像">
                  <template slot-scope="scope1">
                    <img :src="imgPath+scope1.row.avatar" style="width: 50px; height: 50px">
                  </template>
                </el-table-column>
                <el-table-column label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">冻结</span>
                    <span v-if="scope.row.status == 1">正常</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否是会员" prop="isvip">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isvip == 1">会员</span>
                    <span v-if="scope.row.isvip == 0">非会员</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)" style="margin-left: 5px">编辑</el-button>
                        <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)" style="margin-left: 5px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[4, 8 , 12, 16]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->
        <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addUserFormClose">
            <el-form
                    :model="addUserForm"
                    ref="addUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="用戶名" prop="username">
                    <el-input v-model="addUserForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addUserForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="addUserForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="addUserForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="addUserForm.sex" placeholder="请选择性别">
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="点券" prop="pointTicket">
                  <el-input v-model="addUserForm.pointTicket"></el-input>
                </el-form-item>
                <el-form-item label="阅点" prop="readPoint">
                  <el-input v-model="addUserForm.readPoint"></el-input>
                </el-form-item>
                <el-form-item label="月票" prop="monthTicket">
                  <el-input v-model="addUserForm.monthTicket"></el-input>
                </el-form-item>
              <el-form-item label="头像" prop="avatar">
                <el-input v-model="addUserForm.avatar" readonly></el-input>
                <el-upload
                    class="avatar-uploader"
                    :headers="myheaders"
                    name="multipartFile"
                    :action="this.$baseUrl.baseUrl+'user/uploadImg'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess1"
                    :before-upload="beforeAvatarUpload">
                  <img style="width: 300px" v-if="addUserForm.avatar" :src="imgPath+addUserForm.avatar" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
                <el-form-item label="是否是会员" prop="isvip">
                  <el-select v-model="addUserForm.isvip" placeholder="请选择是否为会员">
                    <el-option label="否" value="0"></el-option>
                    <el-option label="是" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="是否锁定" prop="status">
                    <el-select v-model="addUserForm.status" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="1"></el-option>
                        <el-option label="是" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <!--修改用戶-->
        <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editUserFormClose"
        >
            <el-form
                    :model="editUserForm"
                    ref="editUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="用戶名" prop="username">
                  <el-input v-model="editUserForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="editUserForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="editUserForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="editUserForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="editUserForm.sex" placeholder="请选择性别">
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="点券" prop="pointTicket">
                  <el-input v-model="editUserForm.pointTicket"></el-input>
                </el-form-item>
                <el-form-item label="阅点" prop="readPoint">
                  <el-input v-model="editUserForm.readPoint"></el-input>
                </el-form-item>
                <el-form-item label="月票" prop="monthTicket">
                  <el-input v-model="editUserForm.monthTicket"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                  <el-input v-model="editUserForm.avatar" readonly></el-input>
                <el-upload
                    class="avatar-uploader"
                    name="multipartFile"
                    :headers="myheaders"
                    :action="this.$baseUrl.baseUrl+'user/uploadImg'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                  <img style="width: 300px" v-if="editUserForm.avatar" :src="imgPath+editUserForm.avatar" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
                <el-form-item label="是否是会员" prop="isvip">
                  <el-select v-model="editUserForm.isvip" placeholder="请选择是否为会员">
                    <el-option label="否" value="0"></el-option>
                    <el-option label="是" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="是否锁定" prop="status">
                  <el-select v-model="editUserForm.status" placeholder="请选择是否锁定账户">
                    <el-option label="否" value="1"></el-option>
                    <el-option label="是" value="0"></el-option>
                  </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editUser">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgPath : this.$baseUrl.imgUrl+"Imgs/headImg/",
                myheaders:{
                  token:sessionStorage.getItem("token")
                },
                editDialogVisible: false,
                swflag: false,
                pageNum: 1,
                pageSize: 4,
                userList: [],
                roleList: [], //系统中所有的角色
                userRoleList: [], //用户拥有的角色
                total: 0,
                username: "",
                password : "",
                nickname : "",
                sex : "",
                age : "",
                pointTicket : "",
                monthTicket : "",
                readPoint : "",
                isvip : "",
                avatar : "",
                status : "",
                addDialogVisible: false,
                addUserForm: {
                    id : "",
                    username: "",
                    password : "",
                    nickname : "",
                    sex : "",
                    age : "",
                    pointTicket : "",
                    readPoint : "",
                    monthTicket : "",
                    isvip : "",
                    status : "",
                    avatar : "",
                },
                editUserForm: {
                    id: -1,
                    username: "",
                    password : "",
                    nickname : "",
                    sex : "",
                    age : "",
                    pointTicket : "",
                    readPoint : "",
                    monthTicket : "",
                    isvip : "",
                    status : "",
                    avatar : "",
                },


            };
        },
        methods: {
            async removeUserById(id) {
              let url = this.$baseUrl.baseUrl + "user/removeUser?id="+id;
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then((res) => {
                if (res == 'confirm'){
                  this.$axios.delete(url).then((res)=>{
                    if (res.data.code == 200){
                      this.$message.success(res.data.msg) ;
                      this.getReportList();
                    }else {
                      this.$message.error(res.data.msg) ;
                    }
                  })
                }
              }).catch(() => {
                this.$message.info("已取消删除,祝您体验愉快") ;
              });
            },
            showEditDialog(row) {
              this.editDialogVisible = true;
              this.editUserForm = row ;
              this.editUserForm.isvip=row.isvip.toString();
              this.editUserForm.sex = row.sex.toString() ;
              this.editUserForm.status = row.status.toString();
            },
            editUserFormClose() {
                this.userRoleList = [];
                this.editUserForm.deptId = "";
                this.editUserForm.roleIds = "";
            },
          // 修改用户模块
            editUser() {
              let url = this.$baseUrl.baseUrl + "user/modifyUser" ;
              this.$axios.put(url,{
                id : this.editUserForm.id,
                username: this.editUserForm.username,
                password : this.editUserForm.password,
                nickname : this.editUserForm.nickname,
                sex : this.editUserForm.sex,
                age : this.editUserForm.age,
                pointTicket : this.editUserForm.pointTicket,
                readPoint : this.editUserForm.readPoint,
                monthTicket : this.editUserForm.monthTicket,
                isvip : this.editUserForm.isvip,
                status : this.editUserForm.status,
                avatar : this.editUserForm.avatar,
              }).then(res=>{
                  if (res.data.code == 200){
                    this.$message.success(res.data.msg) ;
                    this.$refs.editUserFormRef.resetFields();
                    this.editDialogVisible = false ;
                    this.getReportList() ;
                  }else {
                    this.$message.error(res.data.msg) ;
                  }
              })
            },
            addUser() {
              let url = this.$baseUrl.baseUrl + "user/addUser" ;
              this.$axios.post(url , {
                id : this.addUserForm.id ,
                username: this.addUserForm.username,
                password : this.addUserForm.password,
                nickname : this.addUserForm.nickname,
                sex : this.addUserForm.sex,
                age : this.addUserForm.age,
                pointTicket : this.addUserForm.pointTicket,
                readPoint : this.addUserForm.readPoint,
                monthTicket : this.addUserForm.monthTicket,
                isvip : this.addUserForm.isvip,
                status : this.addUserForm.status,
                avatar : this.addUserForm.avatar,
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message.success(res.data.msg) ;
                  this.addDialogVisible = false ;
                  this.$refs.addUserFormRef.resetFields();
                  this.getReportList();
                }else {
                  this.$message.error(res.data.msg) ;
                }
              })
            },
            addUserFormClose() {
                this.$refs.addUserFormRef.resetFields();
                this.userRoleList = [];
                this.addUserForm.deptId = "";
                this.addUserForm.roleIds = "";
            },
          // 初始化用户数据
            getReportList() {
              let url = this.$baseUrl.baseUrl + "user/userList" ;
              this.$axios.get(url,{
                params : {
                  now : this.pageNum,
                  size : this.pageSize,
                  username : this.username
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.userList = res.data.data.list ;
                  this.pageSize = res.data.data.pageSize;
                  this.pageNum = res.data.data.pageNum;
                  this.total = res.data.data.total;
                }else {
                  this.$message.error(res.data.msg) ;
                }
              })
            },
          //头像上传
          handleAvatarSuccess(res) {
            this.editUserForm.avatar=res.data;
          },
          handleAvatarSuccess1(res) {
            this.addUserForm.avatar=res.data;
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
            getRoleList() {

            },
            searchReport() {
                this.pageNum = 1;
                this.pageSize = 4;
                this.getReportList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getReportList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getReportList();
            },
            //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
            getRoleNames(arr) {
                if (!arr) return;
                let roleNameArr = new Array();
                for (let i = 0; i < arr.length; i++) {
                    roleNameArr.push(arr[i].name);
                }
                return roleNameArr.join(",");
            },

            reloadData() {
                this.searchReport();
                this.getRoleList();
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>